<template>
	<div class="page">
		<el-aside width="200px">
			<el-scrollbar>
				<el-menu :default-active="menuActive">
					<el-sub-menu
						v-for="(item, index) in apiList"
						:key="index"
						:index="item.categoryCode"
					>
						<template #title>
							<el-icon><Folder /></el-icon>
							<span>{{ item.categoryName }}</span>
						</template>
						<el-menu-item
							v-for="(item, index) in item.openApiDocList"
							:key="index"
							:index="item.id"
							@click="menuClick(item)"
						>
							{{ item.apiName }}
						</el-menu-item>
					</el-sub-menu>
				</el-menu>
			</el-scrollbar>
		</el-aside>
		<div class="right">
			<template v-if="menuActive">
				<div class="apiName">{{ apiInfo.apiName }}</div>
				<div class="row" v-if="apiInfo.remark">
					<div class="label">描述：</div>
					<div class="value">{{ apiInfo.remark }}</div>
				</div>
				<div class="title">请求参数</div>
				<el-table
					:data="requestList"
					row-key="id"
					:tree-props="{ children: 'childList' }"
				>
					<el-table-column label="字段" prop="fieldName" />
					<el-table-column label="类型" prop="fieldType">
						<template #default="scope">
							{{ fieldTypeMap[scope.row.fieldType] }}
						</template>
					</el-table-column>
					<el-table-column label="最大长度" prop="maxLength" />
					<el-table-column label="是否必填" prop="required">
						<template #default="scope">
							{{ scope.row.required === "1" ? "是" : "否" }}
						</template>
					</el-table-column>
					<el-table-column label="示例值" prop="exampleValue" />
					<el-table-column label="字段描述" prop="remark" />
				</el-table>
				<pre
					v-if="requestExample"
					class="language-css"
					v-html="requestExample"
				></pre>
				<div class="title">响应参数</div>
				<el-table
					:data="responseList"
					row-key="id"
					:tree-props="{ children: 'childList' }"
				>
					<el-table-column label="字段" prop="fieldName" />
					<el-table-column label="类型" prop="fieldType">
						<template #default="scope">
							{{ fieldTypeMap[scope.row.fieldType] }}
						</template>
					</el-table-column>
					<el-table-column label="最大长度" prop="maxLength" />
					<el-table-column label="示例值" prop="exampleValue" />
					<el-table-column label="字段描述" prop="remark" />
				</el-table>
				<pre
					v-if="responseExample"
					class="language-css"
					v-html="responseExample"
				></pre>
			</template>
		</div>
	</div>
</template>
<script setup>
import request from "@/utils/request.js";
import { onMounted, reactive, ref } from "vue";

let requestList = ref();
let responseList = ref();
let responseExample = ref();
let requestExample = ref();
let fieldTypeMap = ref({});
let apiList = ref([]);
let apiInfo = reactive({});
let menuActive = ref(5);
onMounted(async () => {
	getFieldTypeEnum();
	await getApiList();
	getApiDetail();
});

const getApiList = async () => {
	let res = await request({
		url: "/user/apiDoc/itemList",
		method: "get",
	});
	if (res.code === 200) {
		apiList.value = res.data;
		console.log("xxx", res.data[0].openApiDocList[0].id);
		if (res.data.length > 0 && res.data[0].openApiDocList.length > 0) {
			menuActive.value = res.data[0].openApiDocList[0].id;
		}
	}
};

const getApiDetail = async () => {
	let res = await request({
		url: `/user/apiDoc/${menuActive.value}`,
		method: "get",
	});
	if (res.code === 200) {
		let responseData = res.data;
		requestList.value = responseData.requestList;
		responseList.value = responseData.responseList;

		responseExample.value = responseData.responseExample;
		requestExample.value = responseData.requestExample;
		Object.keys(responseData).forEach((item) => {
			apiInfo[item] = responseData[item];
		});
	}
};
const getFieldTypeEnum = async () => {
	let res = await request({
		url: "/common/enum/FieldTypeEnum",
		methods: "get",
	});
	let objMap = {};
	res.forEach((item) => {
		objMap[item.code] = item.name;
	});
	fieldTypeMap.value = objMap;
	console.log("fieldTypeMap", fieldTypeMap);
};
const menuClick = (item) => {
	console.log("item", item);
	menuActive.value = item.id;
	getApiDetail(item.id);
};
</script>
<style lang="scss" scoped>
::v-deep.el-menu-item.is-active {
	color: #1c72de;
	background-color: #ebf6f8;
	// font-weight: 700;
}
pre[class*="language-"] {
	background: #f5f2f0;
	padding: 1em;
	margin: 0.5em 0;
	overflow: auto;
	color: #000;
}
.row {
	display: flex;
}
.page {
	display: flex;
	padding-top: 10px;
	width: 1200px;
	margin: 0 auto;
	.right {
		flex: 1;
		padding: 20px;
		width: 1000px;
		overflow: auto;
		padding-bottom: 500px;
		.apiName {
			font-size: 25px;
			font-weight: bold;
			background-color: rgb(255, 255, 255);
			height: 42px;
			line-height: 42px;
		}
		.title {
			margin-top: 50px;
			margin-bottom: 20px;
		}
	}
}
</style>
